<template>
  <div v-if="isLoading!==true">
    <h1>数据管理模块 <span style="color: red;font-size: 20px">负责人： 安睿泽</span></h1>
    <el-descriptions
        style="width: 75%;align-content: center;margin-left: 10%"
        title="实验步骤具体信息"
        :column="1" border>
      <template #extra>
        <el-button type="primary" size="small" @click="handleBack">返回上级</el-button>
      </template>

      <el-descriptions-item>
        <template #label>
          <i class="el-icon-user"></i>
          步骤名
        </template>
        {{ expFileInfo.pro_name }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <i class="el-icon-mobile-phone"></i>
          所属实验名
        </template>
        {{ expFileInfo.exp_name }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <i class="el-icon-location-outline"></i>
          所属项目名
        </template>
        {{ expFileInfo.project_name }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <i class="el-icon-tickets"></i>
          步骤状态
        </template>
        <el-tag size="small">{{ expFileInfo.pro_state }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <i class="el-icon-office-building"></i>
          负责人
        </template>
        {{ expFileInfo.pi_name }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <i class="el-icon-tickets"></i>
          实验报告
        </template>

        <el-row>
          <el-col :span="6">
            <el-link v-if="expFileInfo.file_report!==null" type="primary"
                     :href='baseUrl+"/expFileInfo/download?path="+expFileInfo.file_report.path+"&name="+expFileInfo.file_report.name'
                     target="_blank">
              <i class="el-icon-document el-icon--left"></i>
              {{ expFileInfo.file_report.name }}
            </el-link>

            <span v-if="expFileInfo.file_report===null">
              <i class="el-icon-document el-icon--left"></i>
              当前无实验报告，先上传一个吧！
            </span>
          </el-col>

          <el-col :span="10">
            <el-upload
                ref="upload"
                :action='baseUrl+"/expFileInfo/updateReport"'
                :on-success="reFreshData"
                :data="{
                  id: pro_id
                }"
                :show-file-list="false">

              <template #trigger>
                <el-button size="small" type="primary">
                  <span v-if="expFileInfo.file_report===null">上传报告</span>
                  <span v-if="expFileInfo.file_report!==null">重传报告</span>
                </el-button>
              </template>

              <el-popconfirm
                  v-if="expFileInfo.file_report!==null"
                  title="确定删除实验报告吗？"
                  v-on:confirm="delReport">
                <template #reference>
                  <el-button style="margin-left: 10px;" size="small" type="success">删除报告</el-button>
                </template>
              </el-popconfirm>
            </el-upload>
          </el-col>
        </el-row>
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>
          <i class="el-icon-tickets"></i>
          实验数据
        </template>

        <el-row>
          <el-col :span="6">
            <el-link v-if="expFileInfo.file_data!==null" type="primary"
                     :href='baseUrl+"/expFileInfo/download?path="+expFileInfo.file_data.path+"&name="+expFileInfo.file_data.name'
                     target="_blank">
              <i class="el-icon-document el-icon--left"></i>
              {{ expFileInfo.file_data.name }}
            </el-link>

            <span v-if="expFileInfo.file_data===null">
              <i class="el-icon-document el-icon--left"></i>
              当前无实验数据，先上传一个吧！
            </span>
          </el-col>

          <el-col :span="10">
            <el-upload
                ref="upload"
                :action='baseUrl+"/expFileInfo/updateData"'
                :on-success="reFreshData"
                :data="{
                  id: pro_id
                }"
                :show-file-list="false">

              <template #trigger>
                <el-button size="small" type="primary">
                  <span v-if="expFileInfo.file_data===null">上传数据</span>
                  <span v-if="expFileInfo.file_data!==null">重传数据</span>
                </el-button>
              </template>

              <el-popconfirm
                  v-if="expFileInfo.file_data!==null"
                  title="确定删除实验数据吗？"
                  v-on:confirm="delData">
                <template #reference>
                  <el-button style="margin-left: 10px;" size="small" type="success">删除数据</el-button>
                </template>
              </el-popconfirm>
            </el-upload>
          </el-col>
        </el-row>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <i class="el-icon-tickets"></i>
          其他文件
        </template>

        <el-upload
            :action='baseUrl+"/expFileInfo/updateExtra"'
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-remove="beforeRemove"
            :data="{
              id: pro_id
            }"
            multiple
            :limit="9999"
            :file-list="expFileInfo.file_extra">
          <template #trigger>
            <el-button size="small" type="primary">点击上传</el-button>
          </template>

          <el-button size="small" type="success"
                     @click="downloadAll" style="margin-left: 20px"
                     v-if="expFileInfo.file_extra.length!==0">下载全部
          </el-button>
          <template #tip>
            <div class="el-upload__tip">当前共{{ expFileInfo.file_extra.length }}个其他文件。点击对应文件下载或点击按钮打包下载全部</div>
          </template>
        </el-upload>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus";

export default {
  name: "updateData",
  data() {
    return {
      baseUrl: process.env.VUE_APP_BaseUrl,
      isLoading: true,
      pro_id: null,
      expFileInfo: null,
    }
  },
  created() {
    this.pro_id = this.$route.params.pro_id;
    if (this.pro_id === undefined) {
      this.pro_id = sessionStorage.getItem("pro_id");
    } else {
      sessionStorage.setItem("pro_id", this.pro_id)
    }

    this.reFreshData();
  },

  methods: {
    reFreshData() {
      let that = this;
      get("/expFileInfo/getInfo", {
        id: this.pro_id
      }).then(function (res) {
        res = res.data;
        that.expFileInfo = res;
        that.expFileInfo.file_report = JSON.parse(res.file_report)
        that.expFileInfo.file_data = JSON.parse(res.file_data)
        that.expFileInfo.file_extra = JSON.parse(res.file_extra)

        that.isLoading = false;
      })
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
      get("/expFileInfo/delExtra", {
        id: this.pro_id,
        file_id: file.id
      }).then(function (res) {
        if (res.code === 1) {
          ElMessage.success({
            showClose: true,
            message: "已删除" + file.name,
            type: "success",
            center: true
          })
        }
      })
      window.location.reload();
    },

    handleSuccess(response, file, fileList) {
      this.reFreshData();
      if (response.code === 1) {
        ElMessage.success({
          showClose: true,
          message: "已上传" + file.name,
          type: "success",
          center: true
        })
      } else {
        ElMessage.warning({
          showClose: true,
          message: "上传失败" + file.name,
          type: "warning",
          center: true
        })
      }
      console.log(fileList)
    },

    handlePreview(file) {
      window.location.href = this.baseUrl + "/expFileInfo/download?path=" + file.path + "&name=" + file.name;
    },

    beforeRemove(file, fileList) {
      console.log(fileList)
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    delReport() {
      let that = this;
      get("/expFileInfo/delReport", {
        id: this.pro_id
      }).then(function (res) {
        if (res.code === 1) {
          that.expFileInfo.file_report = null;
          ElMessage.success({
            showClose: true,
            message: "实验报告已删除",
            type: "success",
            center: true
          })
        }
      })
    },

    delData() {
      let that = this;
      get("/expFileInfo/delData", {
        id: this.pro_id
      }).then(function (res) {
        if (res.code === 1) {
          that.expFileInfo.file_data = null;
          ElMessage.success({
            showClose: true,
            message: "实验数据已删除",
            type: "success",
            center: true
          })
        }
      })
    },

    downloadAll() {
      window.location.href = this.baseUrl + "/expFileInfo/downloadAll?name="
          + this.expFileInfo.pro_name + "&file_list=" + JSON.stringify(this.expFileInfo.file_extra);
    },

    handleBack() {
      history.back();
    }
  }
}
</script>

<style scoped>

</style>